<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>侧边栏L3-个人中心-聊天消息</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<!-- 引入字体 -->
	<script src="../../js/libs/webfontloader.min.js" th:src="@{/js/libs/webfontloader.min.js}"></script>
	<script>
		WebFont.load({
			google: {
				families: ['Roboto:300,400,500,700:latin']
			}
		});
	</script>
	<!-- 引入bootstrap css -->
	<link rel="stylesheet" type="text/css" href="../../Bootstrap/dist/css/bootstrap-reboot.css" th:href="@{/Bootstrap/dist/css/bootstrap-reboot.css}">
	<link rel="stylesheet" type="text/css" href="../../Bootstrap/dist/css/bootstrap.css" th:href="@{/Bootstrap/dist/css/bootstrap.css}">
	<link rel="stylesheet" type="text/css" href="../../Bootstrap/dist/css/bootstrap-grid.css" th:href="@{/Bootstrap/dist/css/bootstrap-grid.css}">
	<!-- 引入主要 css -->
	<link rel="stylesheet" type="text/css" href="../../css/main.css" th:href="@{/css/main.css}">
	<link rel="stylesheet" type="text/css" href="../../css/fonts.min.css" th:href="@{/css/fonts.min.css}">
</head>
<body class="page-has-left-panels">
<!-- Preloader 预加载 -->
<div th:replace="/_fragment::preload"></div>
<!-- ... end Preloader 结束预加载-->

<!-- Fixed Sidebar Left 左侧菜单 -->
<div th:replace="common/sidebar_left :: sidebar"></div>
<!-- ... end Fixed Sidebar Left 结束左侧菜单-->

<!-- Header-BP 头部导航栏-->
<div th:replace="common/headNav :: headNav"></div>
<!-- ... end Header-BP 结束头部导航栏-->

<!--头部空间-->
<div class="header-spacer"></div>
<!--结束头部空间-->

<!--个人中心-聊天消息主体-->
<div class="container">
    <div class="row">
<!--		<p th:text="${messageList}"></p>-->
		<!--右侧-->
        <div class="col col-xl-9 order-xl-2 col-lg-9 order-lg-2 col-md-12 order-md-1 col-sm-12 col-12">
            <div class="ui-block">
                <div class="ui-block-title">
                    <h6 class="title">消息列表</h6>
                </div>
                <div class="row">

					<!-- 聊天消息列表 -->
                    <div  class="col col-xl-5 col-lg-6 col-md-12 col-sm-12 col-12 padding-r-0">
<!--						<p th:text="${messageList}"></p>-->
                        <ul  class="notification-list chat-message" th:if="${messageList} != null">
							<!--单个聊天项-->
							<!--数据：messageList聊天对象头像、聊天事件、聊天内容概要-->
                            <li th:each="user:${messageList}">
								<!-- 点击显示对应用户的聊天窗口-->
<!--								<a >-->
									<div class="author-thumb">
										<img th:src="${user.headPhoto}"
											 style="height: 35px;width: 35px" src="../../img/avatar1-sm.jpg" alt="聊天对象">
									</div>
									<input type="hidden" th:id="${user.userId}" id="fid_hidden" th:value="${user.userId}">

								<form method="post" th:action="@{/chat/{fid}/friend(fid=${user.userId})}" style="display: inline">

								<div class="notification-event">
										<!--事件：点击显示对应用户的个人主页  th:href="@{/user/{uid}/person/main(uid=${user.userId})}"  -->
										<a type="submit" id="a_post" th:text="${user.uname}"
										   href="#" class="h6 notification-friend">Diana Jameson</a>
										<!--                                    <span class="chat-message-item">Hi James! It’s Diana, I just wanted to let you know that we have to reschedule...</span>-->
										<!--                                    <span class="notification-date"><time class="entry-date updated">4 hours ago</time></span>-->
								</div>
								</form>
<!--								</a>-->

                            </li>

                        </ul>
						<script>
							$("#a_post").on("click",function(event){
								event.preventDefault() ; // 使得a标签自带的方法失效
								$.ajax({
									type:"POST",
									url:"/makefriend/chat/"+ $("#fid_hidden")+"/friend",
									contentType:"application/json",
									data:{"fid":$("#fid_hidden")},
									dataType:"json",
									success:function(result) {
										alert(result) ;
									},
									error:function(result) {
										alert(result) ;
									}
								})
							});
						</script>
                    </div>
					<!-- 结束聊天列表 -->
					<!-- Chat Field 聊天域--><!--鸡肋、待改善-->
                    <div class="col col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 padding-l-0">
                        <div class="chat-field">
							<!--数据：当前聊天对象昵称-->
                            <div class="ui-block-title" th:if="${friend} != null">
								<!--friendName 消息接收者name-->
                                <h6 id="friendName" th:text="${friend.uname}" class="title">龚永杰</h6>
								<input id="fid" type="hidden" th:value="${friend.userId}">
								<input id="friend_photo" type="hidden" th:value="${friend.headPhoto}">
								<!--消息发送者name-->
								<div th:if="${session.user} != null ">
									<input id="username" type="hidden" th:value="${session.user.getUname()}">
									<input id="userId" type="hidden" th:value="${session.user.getUserId()}">
									<input id="user_photo" type="hidden" th:value="${session.user.getHeadPhoto()}">
								</div>
                            </div>

							<!--聊天消息显示域-->
                            <div class="mCustomScrollbar" data-mcs-theme="dark">
                                <ul id="content" class="notification-list chat-message chat-message-field" style="height: 200px">
                                </ul>
                            </div>
							<!--结束聊天消息显示域-->

							<!--信息发送区-->
                            <form>
								<!--数据：聊天消息的发送内容-->
                                <div class="form-group label-floating is-empty">
                                    <label class="control-label">Write your reply here...</label>
                                    <textarea id="input_text" class="form-control" placeholder="" required></textarea>
                                </div>
								<!--事件：发送信息-->
                                <div class="add-options-message">
                                    <button id="submit" type="submit" class="btn btn-primary btn-sm">发送</button>
                                </div>
                            </form>
							<!--结束信息发送区-->
                        </div>
                    </div>
					<!-- ... end Chat Field 结束聊天域 -->
                </div>
            </div>
        </div>
		<!--结束右侧-->
		<!--左侧-->
		<div class="col col-xl-3 order-xl-1 col-lg-3 order-lg-1 col-md-12 order-md-2 col-sm-12 col-12 responsive-display-none">
			<!--个人中心选择项-->
			<div class="ui-block">
				<div class="your-profile">
					<div class="ui-block-title ui-block-title-small">
						<h6 class="title">个人中心</h6>
					</div>
					<div class="ui-block-title">
						<a href="05-PersonDetail.html" th:href="@{/personDetail}" class="h6 title">个人资料</a>
					</div>
					<!--数据：通知数、聊天消息、好友请求数-->
					<!--					&lt;!&ndash;不显示就注释掉&ndash;&gt;-->
					<!--                    <div class="ui-block-title">-->
					<!--                        <a href="05-PersonDetail-Notifications.html" class="h6 title">通知</a>-->
					<!--                        &lt;!&ndash;<a href="05-PersonDetail-Notifications.html" class="items-round-little bg-primary">2</a>&ndash;&gt;-->
					<!--                    </div>-->
					<div class="ui-block-title">
						<a href="05-PersonDetail-ChatMessages.html" class="h6 title">聊天消息</a>
					</div>
					<div class="ui-block-title">
						<a href="05-PersonDetail-FriendsRequests.html"
						   th:href="@{/friendAsk/findByReceiverId(receiverId=${session.user.getUserId()})}" class="h6 title">好友请求</a>
						<!--<a href="05-PersonDetail-FriendsRequests.html" class="items-round-little bg-blue">4</a>-->
					</div>
					<!--					<div class="ui-block-title">-->
					<!--						<a href="05-PersonDetail-FriendsDel.html" class="h6 title"-->
					<!--						th:href="@{}">好友管理</a>-->
					<!--						&lt;!&ndash;<a href="05-PersonDetail-FriendsRequests.html" class="items-round-little bg-blue">4</a>&ndash;&gt;-->
					<!--					</div>-->
				</div>
			</div>
			<!--end个人中心选择项-->
		</div>
		<!--结束左侧-->
    </div>
</div>
<!--结束个人中心-聊天消息主体-->

<a class="back-to-top" href="#">
    <img src="../../svg-icons/back-to-top.svg" alt="arrow" class="back-icon">
</a>

<!-- JS Scripts -->
<div th:replace="/_fragment::footer">
	<script src="../../js/jQuery/jquery-3.4.1.js"></script>
	<script src="../../js/libs/jquery.appear.js"></script>
	<script src="../../js/libs/jquery.mousewheel.js"></script>
	<script src="../../js/libs/perfect-scrollbar.js"></script>
	<script src="../../js/libs/jquery.matchHeight.js"></script>
	<script src="../../js/libs/svgxuse.js"></script>
	<script src="../../js/libs/imagesloaded.pkgd.js"></script>
	<script src="../../js/libs/Headroom.js"></script>
	<script src="../../js/libs/velocity.js"></script>
	<script src="../../js/libs/ScrollMagic.js"></script>
	<script src="../../js/libs/jquery.waypoints.js"></script>
	<script src="../../js/libs/jquery.countTo.js"></script>
	<script src="../../js/libs/popper.min.js"></script>
	<script src="../../js/libs/material.min.js"></script>
	<script src="../../js/libs/bootstrap-select.js"></script>
	<script src="../../js/libs/smooth-scroll.js"></script>
	<script src="../../js/libs/selectize.js"></script>
	<script src="../../js/libs/swiper.jquery.js"></script>
	<script src="../../js/libs/isotope.pkgd.js"></script>
	<script src="../../js/libs/ajax-pagination.js"></script>
	<script src="../../js/libs/circle-progress.js"></script>
	<script src="../../js/libs/loader.js"></script>
	<script src="../../js/libs/run-chart.js"></script>
	<script src="../../js/libs/jquery.magnific-popup.js"></script>
	<script src="../../js/libs/ion.rangeSlider.js"></script>

	<script src="../../js/main.js"></script>
	<script src="../../js/libs-init/libs-init.js"></script>

	<script src="../../Bootstrap/dist/js/bootstrap.bundle.js"></script>
</div>

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>-->
<script>
	//点击好友名称展示相关消息


	// function showChat(name){
	// 	toName = name;
	// 	//现在聊天框
	// 	$("#content").html("");
	// 	$("#content").css("visibility","visible");
	// 	$("#Inchat").html("当前正与"+toName+"聊天");
	// 	//从sessionStorage中获取历史信息
	// 	var chatData = sessionStorage.getItem(toName);
	// 	if (chatData != null){
	// 		$("#content").html(chatData);
	// 	}
	// }
	$(function () {
		var toName = $("#friendName").text() ; // 消息接收者姓名
		var toId = $("#fid").val() ;  // 消息接收者id
		var username = $("#username").val() ; // 消息发送者姓名
		var userId = $("#userId").val() ; // 消息发送者id
		var friend_photo = $("#friend_photo").val() ;
		var user_photo = $("#user_photo").val() ;
		// $("#submit").click(function () {
		// 	// alert(toName+toId+username+userId);
		// });
		// $.ajax({
		// 	url:"getUsername",
		// 	success:function (res) {
		// 		username = res;
		// 	},
		// 	async:false //同步请求，只有上面好了才会接着下面
		// });

		//建立websocket连接
		var ws = new WebSocket("ws://localhost:8089/makefriend/websocket/chat");
		ws.onopen = function (evt) {
			// $("#username").text(username) ;

		};
		//接受消息（接收过来的是一个contact对象）
		ws.onmessage = function (evt) {
			//获取服务端推送的消息
			var dataStr = evt.data;
			//将dataStr转换为json对象
			var res = JSON.parse(dataStr);
			// <img src=\"../../img/avatar1-sm.jpg\" alt=\"对方\">\n" +
			var message = "<li>\n" +
					"                                        <div class=\"author-thumb\">\n" +

					"                                            <img src=\"" +friend_photo+
					"\" style='width: 35px;height: 35px' alt=\"对方\">\n" +

					"                                        </div>\n" +
					"                                        <div class=\"notification-event\">\n" +
					"                                            <a href=\"#\" class=\"h6 notification-friend\">"+res.sender.uname+"</a>\n" +
					"                                            <span class=\"notification-date\"><time class=\"entry-date updated\" >"+res.sendTime+"</time></span>\n" +
					"                                            <span class=\"chat-message-item\">"+res.content+"</span>\n" +
					"                                        </div>\n" +
					"                                    </li>";
			// 如果当前窗口的消息接收者
			// == 来自服务器端的消息的消息发送者
		    // || userId == res.receiverId
			// toId === res.senderId ||
			if ( toId === res.senderId ||userId == res.receiverId) {
				$("#content").append(message);
			}
			var chatData = sessionStorage.getItem(toName);
			if (chatData != null){
				message = chatData + message;
			}
			//保存聊天消息
			sessionStorage.setItem(toName,message);
		};



		//发送消息
		$("#submit").click(function () {
			//1.获取输入的内容
			var data = $("#input_text").val();
			// data = new Date().format("yyyy-MM-dd HH:mm:ss") ;
			//2.清空发送框
			$("#input_text").val("");
			// <img src=\"../../img/avatar1-sm.jpg\" alt=\"对方\">\n" +
			var json = {"senderId": userId ,"receiverId":toId,"content": data};
			//将数据展示在聊天区
			var str = "<li>\n" +
					"                                        <div class=\"author-thumb\">\n" +
					"                                            <img src=\"" +user_photo+
					"\" style='width: 35px;height: 35px' alt=\"对方\">\n" +
					"                                        </div>\n" +
					"                                        <div class=\"notification-event\">\n" +
					"                                            <a href=\"#\" class=\"h6 notification-friend\">"+username+"</a>\n" +
					"                                            <span class=\"notification-date\"><time class=\"entry-date updated\" >"+new Date()+"</time></span>\n" +
					"                                            <span class=\"chat-message-item\">"+data+"</span>\n" +
					"                                        </div>\n" +
					"                                    </li>";
			$("#content").append(str);

			var chatData = sessionStorage.getItem(toName);
			if (chatData != null){
				str = chatData + str;
			}
			sessionStorage.setItem(toName,str);
			//3.发送数据
			ws.send(JSON.stringify(json));
			console.log("数据发送成功！")
		});

		// ws.onclose = function () {
		// 	// $("#username").html("<h3 style=\"text-align: center;\">用户："+ username +"<span>-离线</span></h3>");
		// };
	});


	// function sendMsg(){
	// 	//1.获取输入的内容
	// 	alert("ui") ;
	// 	var data = $("#input_text").val();
	// 	//2.清空发送框
	// 	$("#input_text").val("");
	// 	var json = {"senderId": userId ,"receiverId":toId,"content": data};
	// 	//将数据展示在聊天区
	// 	var str = "<li>\n" +
	// 			"                                        <div class=\"author-thumb\">\n" +
	// 			"                                            <img src=\"../../img/avatar1-sm.jpg\" alt=\"对方\">\n" +
	// 			"                                        </div>\n" +
	// 			"                                        <div class=\"notification-event\">\n" +
	// 			"                                            <a href=\"#\" class=\"h6 notification-friend\">"+username+"</a>\n" +
	// 			"                                            <span class=\"notification-date\"><time class=\"entry-date updated\" >"+new Date()+"</time></span>\n" +
	// 			"                                            <span class=\"chat-message-item\">"+data+"</span>\n" +
	// 			"                                        </div>\n" +
	// 			"                                    </li>";
	// 	$("#content").append(str);
	//
	// 	var chatData = sessionStorage.getItem(toName);
	// 	if (chatData != null){
	// 		str = chatData + str;
	// 	}
	// 	sessionStorage.setItem(toName,str);
	// 	//3.发送数据
	// 	ws.send(JSON.stringify(json));
	// }

</script>
</body>

</html>